import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Breadcrumb, Space, Tabs, Button, Modal, Form, Input, Popconfirm, message, } from 'antd';
import ShopTable from '../../../components/ShopTable'
import ShopSearch from '../../../components/Shopsearch'


const GoodsFormat = (props) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [formatDetail, setDetail] = useState({})
    const [aa, setAA] = useState(true)
    const { formatList } = props
    const formRef = useRef()
    const SearchForm = {  //搜索组件传值
        search: {
            title: '商品规格搜索：',
            placeholder: '请输入商品规格'
        }
    }
    useEffect(() => {
        props.dispatch({
            type: 'get_format'
        })
    }, [])
    useEffect(() => {
        // console.log(formatDetail, 'formatDetail')
        if (formRef.current) {
            formRef.current.setFieldsValue({ ...formatDetail })
        }
    }, [formatDetail])
    const handleAddClassify = () => {  //添加商品分类
        setDetail({diatype:'新增'})
        setAA(true)
        setIsModalVisible(true);
    }

    const handleEdmit = (record) => {//编辑显示弹框
        console.log(record)
        setAA(true)
        setDetail({ ...record, diatype: '编辑' })
        setIsModalVisible(true);
        // console.log(formatDetail, 'formatDetail')

    }

    const handleSearch = (val) => {//搜索
        // console.log(val,'keyword')
        props.dispatch({
            type: 'get_format',
            payload: {
                keyword: val
            }
        })
    }
    const delConfirm = (record) => {//确定删除
        const { id } = record;
        props.dispatch({
            type: 'delete_formate',
            payload: id
        })
        props.dispatch({
            type: 'get_format'
        })
    }

    const delCancel = (e) => {//取消删除
        // console.log(e);
        message.error('取消删除');
    }
    const handleCreate = () => {  //弹框确定
        // console.log(formatDetail,'formatDetail')
        // console.log(formRef.current.getFieldsValue(), 'formRef')
        if (formatDetail.diatype === '编辑') {
            // console.log(111)
            props.dispatch({
                type: 'edmit_format',
                payload: {
                    ...formRef.current.getFieldsValue(),
                    id: formatDetail.id
                }
            })
        } else if (formatDetail.diatype === '新增') {
            // console.log(formRef.current.getFieldsValue())
            props.dispatch({
                type: 'add_format',
                payload: {
                    ...formRef.current.getFieldsValue()
                }
            })
        }
        setAA(false)
        //    handleCancel()
        props.dispatch({
            type: 'get_format'
        })
    }
    const handleCancel = () => {//关闭弹框
        setAA(false)
        // setIsModalVisible(false);
    };

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: 'center',
        },
        {
            title: '规格名称',
            dataIndex: 'formatName',
            key: 'formatName',
            align: 'center',
        },
        {
            title: '商品规格',
            dataIndex: 'shopformat',
            key: 'shopformat',
            align: 'center',
        },
        {
            title: '商品属性',
            dataIndex: 'shopAttributes',
            key: 'shopAttributes',
            align: 'center',
        },
        {
            title: '操作',
            key: 'opreat',
            align: 'center',
            width: 230,
            render: (text, record) => (
                <Space size="middle">
                    <Button type="link" size='small' onClick={() => handleEdmit(text, record)}>编辑</Button>
                    <Popconfirm
                        title="确定要删除这项吗?"
                        onConfirm={() => delConfirm(text, record)}
                        onCancel={delCancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="link" size='small'
                        >删除</Button>
                    </Popconfirm>
                </Space>
            ),
        }
    ];

    // console.log(classifyList)
    return (
        <div className={style.goodsManage}>
            {/* 面包屑导航 */}
            <div className={style.head}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>
                        <i className='iconfont icon-gengduo-2'></i>
                        <a href="/layout">主页</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        商品规格
                    </Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.main}>
                <section>
                    {/* 搜索 */}
                    <ShopSearch
                        SearchForm={SearchForm}
                        handleSearch={handleSearch}
                    />
                    {/* 添加 */}
                    <Button type="primary" onClick={handleAddClassify} size='small' style={{ marginBottom: '15px' }}>新增</Button>
                    <ShopTable curList={formatList} columns={columns} />
                </section>
            </div>
            {aa && <Modal title={formatDetail.diatype === '编辑' ? '编辑' : '新增'}
                visible={isModalVisible}
                onOk={handleCreate}
                okText='确认'
                cancelText='取消'
                onCancel={handleCancel}>
                <Form
                    name="basic"
                    labelCol={{ span: 5 }}
                    wrapperCol={{ span: 14 }}
                    ref={formRef}
                    autoComplete="off"
                >
                    <Form.Item
                        label="规格名称"
                        name="formatName"
                        rules={[{ required: true, message: '规格名称不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品规格"
                        name="shopformat"
                        rules={[{ required: true, message: '商品规格不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品属性"
                        name="shopAttributes"
                        rules={[{ required: true, message: '商品属性不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                </Form>

            </Modal>}

        </div>
    );
}

export default connect((state) => {
    return {
        formatList: state.formatList,
    }
})(GoodsFormat);
